import App from './App';

const nodes = [
    {
        id: 1,
        width: 100,
        height: 100,
        fill: '#ff0',
        x: 100,
        y: 200,
        data: null
    },
    {
        id: 2,
        width: 50,
        height: 50,
        fill: '#f0f',
        x: 400,
        y: 100,
        data: null
    },
    {
        id: 3,
        width: 80,
        height: 100,
        fill: '#0ff',
        x: 500,
        y: 300,
        data: null
    }
];

const links = [
    {
        from: 1,
        fromdire: 'left',
        to: 2,
        todire: 'right',
        type: 1,
        style: {
            stroke: '#FF6EBE',
            lineDash: [2]
        }
    },
    {
        from: 1,
        fromdire: 'bottom',
        to: 2,
        todire: 'bottom',
        type: 1
    },
    {
        from: 2,
        fromdire: 'left',
        to: 3,
        todire: 'top',
        type: 1
    }
];

/**
 * addPath 添加线条 @param {object} { from: 1, fromdire: 'right', to: 2, todire: 'left', type: 1 }
 * addNode 添加点 @param {object}  { id: 3, width: 80, height: 100, fill: '#0ff', x: 500, y: 300, data: null }
 * delPath 删除线 @param {string} id
 * delNode 删除点 @param {string} id
 * saveState 获取当前的originData @return {object}
 * clear 清除图形
 * init 初始化 @param {object} { nodes, links }
 *
 * 支持事件  seek, on, off, pathContextMenu, nodeContextMenu
 */
const app = new App();
app.init({ nodes, links });

// 添加点
$('#add').on('click', e => {
    app.addNode({
        id: +new Date(),
        width: 100,
        height: 100,
        fill: '#0ff',
        x: 400,
        y: 400,
        data: null
    });
});

// 以下为事件方法

// seek 方法
app.seek(d => {
    console.log(d);
});

// 线条鼠标右键
app.pathContextMenu(e => {
    console.log(e);
});

// 点鼠标右键
app.nodeContextMenu(e => {
    console.log(e);
});

// 点击事件
app.on('click', e => {
    console.log('单击', e);
});

// 点击事件
app.on('dblclick', e => {
    console.log('双击', e);
});
